<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <div>
            <!-- v-on的修饰符,用于修改事件的响应 -->
            <div @click.self="bable('只会执行发生在自己身上的事件')">
                <!-- 冒泡不会触发self -->
                self

                <div @click="bable('out')">
                    out
                    <div @click="bable('inn')">
                        inn
                        <!-- 
                        stop 用于阻止冒泡 
                        冒泡排序,顺序为捕获,执行对象,冒泡
                        由低精准度的节点到精准度高的节点,然后执行,再由精准度高的开始执行到精准度低的节点
                        -->

                        <div @click.stop="bable('con')">
                            con
                        </div>



                    </div>
                </div>
            </div>
        </div>
        <!-- prevent阻止默认行为 -->
        <a href="/lll" @click.prevent="">阻止默认行为</a>
        <button @click.once="bable('one')"> 只会执行一次</button> <br>
        <!--  .enter表示在输入案件enter时执行,和.13效果一样,但是.13在vue3废弃 -->
        <input type="text" name="" @keyup.enter="num--" :value='num'>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    num: 10
                };
            },
            methods: {
                bable(str) {
                    console.log(str);
                }
            },
        });
    </script>
</body>

</html>